<template>
  <div class="edit-div">
      <div class="demo-input-suffix">
        <span class="form-input-label"><i class="el-icon-star-on"></i>题目类型：</span>
        <el-select
          v-model="data.question_type"
          placeholder="请选择题目类型"
          :disabled="this.id !== null"
        >
          <el-option
            v-for="item in question_types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="text-input-suffix">
        <span class="form-input-label"><i class="el-icon-star-on"></i>题目内容：</span>
        <el-input type="textarea" style="width: 80%;" :rows="2"  v-model="data.question_name" placeholder="请输入名称"></el-input>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label"><i class="el-icon-star-on"></i>知识点：</span>
        <span @click="showLinkKld" class="link-konwledge">+关联知识点</span>
      </div>
      <div v-if="selectedKlds.length > 0" style="margin: 15px 0 20px 0; display:flex;">
        <span class="form-input-label" style="margin-top: 30px;">关联知识点：</span>
        <div class="linkd-kld-table">
          <el-table
            :data="selectedKlds"
            border
            >
            <el-table-column
              prop="label"
              label="知识点名称">
            </el-table-column>
            <el-table-column
              prop="knowledge_path"
              label="知识点路径">
            </el-table-column>
          </el-table> 
        </div>
      </div>
      <div v-if="['SA', 'BL'].includes(data.question_type)">
        <div class="demo-input-suffix">
          <span class="form-input-label">判题规则：</span>
          <el-select v-model="data.judge_type" placeholder="请选择">
            <el-option
              v-for="item in judge_types"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="text-input-suffix">
          <span class="form-input-label">参考答案：</span>
          <el-input
            class="input-text"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="data.answer">
          </el-input>
        </div>
      </div>
      <div v-else>
        <div class="text-input-suffix">
          <span class="form-input-label">题目选项：</span>
          <div class="input-text">
            <el-table id="choice-table" :data="choices" style="width: 100%">
              <el-table-column label="选项">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.content"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="是否为正确答案">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.is_correct" placeholder="请选择题目类型"
                  >
                    <el-option
                      v-for="item in is_trues"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="onChoiceDel(scope.row)" size="small" class="text-default">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <span id="append-btn" class="apeend-btn" @click="appendChoice" >+添加选项</span>
          </div>
        </div>
      </div>
      <LinkKld ref="linkKld" @onSelectKld="onSelectKld" @onClose="onClose" :show="show" />
    <div class="footer">
      <el-button type="primary" @click="onSubmit">保 存</el-button>
      <el-button @click="onCancel">取 消</el-button>
    </div>
  </div>
</template>
<script>
import CreateFilter from "@/mixins/CreateFilter";
import { queModel } from "@/api/models";
import { Message } from "element-ui";
import LinkKldMixin from '@/mixins/linkKldMixin.js';
export default {
  mixins: [LinkKldMixin, CreateFilter],
  components: {},
  data() {
    return {
      id: null,
      data: {
        question_name: null,
        knowledges: null,
        judge_type: ''
      },
      choices: [],
      is_trues: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 0,
          label: '否'
        }
      ]
    };
  },
  mounted() {
    document.getElementById('append-btn').style.width = document.getElementById('choice-table').offsetWidth + 'px'
    if(this.$route.params.id){
      this.id = this.$route.params.id;
      this.question_type = this.$route.params.question_type;
      this.getItem();
    }
  },
  methods: {
    appendChoice() {
      let item = {
        item: 'A',
        content: '',
        is_correct: 0
      };
      if (this.choices.length > 0) {
        item.item = String.fromCharCode(this.choices[this.choices.length-1].item.charCodeAt(0)+1);
      }
      this.choices.push(item)
    },
    onChoiceDel(row) {
      this.choices = this.choices.filter(v => v.item != row.item)
      this.choices.forEach((v, i) => {
        v.item = String.fromCharCode(65 + i);
      })
    },
    getItem() {
      let action = ['BL', 'SA'].includes(this.question_type) ? queModel.blankQuesItem : queModel.choiceQuesItem;
      action(this.id, (res) => {
        this.data = res.data;
        this.choices = res.data.option_detail;
        this.selectedKlds = res.data.knowledges.map(v => {
          v.label = v.knowledge_name;
          return v;
        })
      });
    },
    onCancel() {
      this.$router.go(-1)
    },
    onSubmit() {
      let d = this.data;
      d.knowledges = this.selectedKlds.map(v => {
        return v.id;
      })
      if (
        !d.question_type ||
        !d.question_name ||
        !d.knowledges ||
        (d.question_type == 'SA' && !d.answer)
      ) {
        return Message.warning("请填完整信息");
      }
      d.question_answer = d.answer
      if(['MC', 'MA', 'TF'].includes(this.data.question_type)) {
        let hasTrue = 0;
        this.choices.forEach(v => {
          if(v.is_correct) {
            hasTrue++;
          }
        })
        if(hasTrue == 0) {
          return Message.warning("至少有一个正确选项为答案");
        }
        if (['MC', 'TF'].includes(this.data.question_type) && hasTrue != 1) {
          return Message.warning("单选题和判断题只能一个正确选项为答案");
        }
        d.answers = this.choices
      }
      let action;
      if(d.id) {
        if(['BL', 'SA'].includes(d.question_type)) {
          action = queModel.updateBlank;
          d.answers = this.choices;
        }else{
          action = queModel.updateChoice;
        }
      }else{
        if(['BL', 'SA'].includes(d.question_type)) {
          action = queModel.createBlank;
          d.answers = this.choices;
        }else{
          action = queModel.createChoice;
        }
      }
      action(d, res => {
        Message.success(res.message);
        this.$router.go(-1);
      }, err => {
        console.log(err);
      })
    }
  },
};
</script>
<style scoped lang="scss">
.form{
  text-align: left;
}
.apeend-btn{
  border: 1px dashed #cccccc;
  padding: 5px 0px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}
</style>